<template>
	<div>
		<div id="postcontent">
		<h3>提交评论</h3>
		<hr />
		<textarea v-model="postcontent" placeholder="请输入您要发表的内容"></textarea>
		<mt-button type="primary" size="large" @click="postcommen">发表评论</mt-button>
	</div>
    	<div id="list">
    	<h3>评论列表</h3>
    	<hr />
    	  <div v-for="(item,index) in list">
    	<div class="title">
    		<span>第{{index+1}}楼</span>
    		<span>用户：{{item.user_name}}</span>
    		<span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD')}} </span>
    	</div>
    		<ul class="mui-table-view">
    			<li class="mui-table-view-cell">{{item.content}}</li>
    		</ul>
    </div>
    </div>
	<mt-button type="primary" size="large" @click="getmore">加载更多</mt-button>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import commen from "../../kits/commen.js";
	export default{
		data(){
			return{
				postcontent:'',
				list:[],
				page:1,
			}
		},
		created(){
			this.getcommenlist(this.page);
		},
		methods:{
			getcommenlist(page){
				page=page || 1;
				var url=commen.apidomain+"/api/getcomments/"+this.id+"?pageindex="+page;
				this.$http.get(url).then(function(res){
					if(res.body.status!=0){
						return;
					}
					console.log(1);
					this.list=this.list.concat(res.body.message);
				})
			},
			postcommen(){
				if(this.postcontent.trim().length<=0){
					Toast("请输入内容！！！")
					return;
				}
				var url= commen.apidomain+"/api/postcomment/"+this.id;
				console.log(url)
				this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
					Toast(res.body.message);
				})
				this.list=[{
					content:this.postcontent,
					add_time:new Date,
					user_name:"匿名用户",
				}].concat(this.list)
				this.postcontent='';
			},
		    getmore(){
		    	this.page++;
		    	this.getcommenlist(this.page);
		    }
		},
		props:['id']
	}
</script>

<style scoped>
	#postcontent{
		padding: 5px;
	}
	#list{
		margin top: 15px;
		padding: 10px;
	}
	.title{
		color: #6D6D72;
		padding: 5px; 
		font-size: 15px;
		background-color: rgba(0,0,0,0.2);
	}
</style>